<template>
  <div class="image-to-image">
    <div class="workspace">
      <!-- 左侧参数面板 -->
      <div class="params-panel">
        <el-form label-position="top">
          <!-- 图片上传 -->
          <el-form-item label="上传参考图">
            <el-upload
              class="image-upload"
              drag
              :auto-upload="false"
              :show-file-list="false"
              accept="image/*"
              @change="handleImageChange"
            >
              <template #default>
                <div v-if="!sourceImage" class="upload-placeholder">
                  <el-icon :size="24"><Upload /></el-icon>
                  <p>拖拽图片到此处或点击上传</p>
                </div>
                <img v-else :src="sourceImage" class="upload-preview" />
              </template>
            </el-upload>
          </el-form-item>

          <!-- 提示词输入 -->
          <el-form-item label="提示词">
            <el-input
              v-model="prompt"
              type="textarea"
              :rows="4"
              placeholder="描述你想要的修改..."
            />
          </el-form-item>

          <!-- 变化强度 -->
          <el-form-item label="变化强度">
            <el-slider v-model="strength" :min="0" :max="1" :step="0.1" />
          </el-form-item>

          <!-- 其他参数... -->
          <el-form-item>
            <el-button 
              type="primary" 
              :loading="generating" 
              :disabled="!sourceImage"
              @click="handleGenerate" 
              style="width: 100%"
            >
              生成图片
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 右侧预览区 -->
      <div class="preview-panel">
        <div class="preview-container">
          <!-- 原图 -->
          <div class="preview-box">
            <h3>原图</h3>
            <div class="preview-image">
              <div v-if="!sourceImage" class="empty-preview">
                <el-icon :size="48"><Picture /></el-icon>
                <p>请上传原图</p>
              </div>
              <img v-else :src="sourceImage" alt="Source image" />
            </div>
          </div>

          <!-- 生成图 -->
          <div class="preview-box">
            <h3>生成结果</h3>
            <div class="preview-image">
              <div v-if="!generatedImage" class="empty-preview">
                <el-icon :size="48"><Picture /></el-icon>
                <p>生成的图片将在这里显示</p>
              </div>
              <img v-else :src="generatedImage" alt="Generated image" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Picture, Upload } from '@element-plus/icons-vue'
import { useImageStore } from '../stores/image'

const imageStore = useImageStore()

// 表单数据
const sourceImage = ref('')
const prompt = ref('')
const strength = ref(0.7)

// 状态
const generating = ref(false)
const generatedImage = ref('')

// 处理图片上传
const handleImageChange = (file: any) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    sourceImage.value = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

// 生成图片
const handleGenerate = async () => {
  if (!sourceImage.value) return
  
  generating.value = true
  try {
    const result = await imageStore.generateImage(prompt.value, {
      init_image: sourceImage.value,
      strength: strength.value
    })
    generatedImage.value = result.imageUrl
  } catch (error) {
    console.error('Generation failed:', error)
  } finally {
    generating.value = false
  }
}
</script>

<style scoped lang="scss">
.image-to-image {
  height: 100%;
}

.workspace {
  display: flex;
  gap: 20px;
  height: 100%;
}

.params-panel {
  width: 300px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  overflow-y: auto;

  .image-upload {
    width: 100%;
    
    .upload-placeholder {
      text-align: center;
      color: #999;
      padding: 20px 0;
      
      p {
        margin-top: 8px;
      }
    }

    .upload-preview {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }
}

.preview-panel {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  overflow-y: auto;

  .preview-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
  }

  .preview-box {
    h3 {
      margin: 0 0 12px;
      color: #666;
    }

    .preview-image {
      height: calc(100% - 32px);
      border: 1px solid #eee;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      .empty-preview {
        text-align: center;
        color: #999;

        p {
          margin-top: 12px;
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style> 